<template>
	<view class="template-mine tn-safe-area-inset-bottom tn-cool-bg-color-userhead">
		<!-- <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">		
				<view class="custom-nav__back" @click="navigateToFn({ url: '/mineMixinPages/seting', checkLogin: true })">
					<view class="tn-icon-set tn-color-black tn-text-shadow-brown" style="font-size: 50rpx;">
					</view>
				</view>					
			</view>
		</tn-nav-bar> -->



		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			
			<!-- 编辑资料 -->
			<!-- <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" style="margin-bottom: 20rpx;">
				<view class="custom-nav__back" @click="navigateToFn({ url: '/mineMixinPages/seting', checkLogin: true })">
					<view class="tn-icon-set tn-color-black tn-text-shadow-brown" style="font-size: 50rpx;">
					</view>
				</view>					
			</view> -->
			<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption">
				<view class="meng tn-cool-bg-color-userhead  ">
					<!-- 图标logo/头像 -->
					<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin-bottom: 26rpx;">
						<view class="justify-content-item">
							<view class="tn-flex tn-flex-row-left" style="width: 100%;">
								<view class=" tn-margin-left">
									<view class="avatar-box">
										<tn-avatar size="156rpx" :src="body.avatar" :bg="body.bg"></tn-avatar>
										<img v-if="!body.is_renzheng" src="../../../static/other/Certification.png" alt="" style="width: 48rpx;height: 48rpx">
									</view>
								</view>
								<view class="" style="width:100%;color: #000;margin-left: 20rpx;color:#fff">
									<view>
										<text class="" style="font-size: 45rpx;font-weight: 900;">{{body.nickname}}</text>
									</view>
									<view
										class="tn-text-ellipsis" style="margin: 10rpx 0 10rpx 0;">
										<text class="" style="font-size:12px; color:#D8D8D8">ID:{{body.id}}
										</text>
										
										<!-- <text class="tn-margin-left-sm" style="font-size:12px;color: #9a9a9a;">推荐人:{{body.daren_name}}</text> -->
									</view>

									<view class="zhuangtai" @click.stop="zhuangtai=true" v-if="body.id">
										<!-- <image :src="calcImageSrc(body.zhuangtai_image)"
											style="width:60rpx;height:60rpx;margin-left: -40rpx;" mode="aspectFill">
										</image> -->
										<text>状态: {{body.zhuangtai_title}}</text><img src="../../../static/other/under.png" style="width: 16rpx; height: 16rpx; display:inline-block; margin-left: 16rpx;" alt="">
									</view>

								</view>
							</view>
						</view>
						<view class="tn-flex tn-margin-right tn-flex-direction-column tn-flex-col-bottom" style="color:#fff;height:100%;margin-top: 12rpx;">
							<view class="tn-flex tn-flex-col-center" style="font-size: 20rpx" @click="navigateToFn({ url: '/mineMixinPages/my_home', checkLogin: true })"><text>我的主页</text> <text style="margin-left: 24rpx;font-size: 30rpx;color:#D8D8D8" class="tn-icon-right"></text></view>
							<tn-button shape="round" :plain="true" height="48rpx" min-width="128rpx" :fontSize="20" padding="0 23rpx" margin="60rpx 0 0 0" style="border-color: #fff;" fontColor="#fff"  @click="navigateToFn({ url: '/mineMixinPages/set', checkLogin: true })">编辑资料</tn-button>
						</view>
					</view>





					<view class="blogger-tips-data__info tn-flex tn-color-white" style="padding-left:40rpx">

						<view @click="navigateToFn({ url: '/mineMixinPages/my_shenqing', checkLogin: true })">
							<view class="tn-flex tn-flex-row-center tn-flex-col-bottom" style="margin-right: 24rpx;">
								<view class="">
									<view style="font-size: 24rpx;" class="tn-color-white tn-text-bold">{{body.renshi}}</view>
								</view>
								<view class="tn-margin-top-xs tn-text-df tn-text-center">
									<text style="color:#D8D8D8;font-size: 20rpx; margin-left: 4rpx;">想认识</text>
								</view>
							</view>
						</view>

						<view @click="navigateToFn({ url: '/mineMixinPages/my_heatlove', checkLogin: true })">
							<view class="tn-flex tn-flex-row-center tn-flex-col-bottom" style="margin-right: 24rpx;">
								<view class="">
									<view style="font-size: 24rpx;" class="tn-color-white tn-text-bold">{{body.xindnong}}</view>
								</view>
								<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
									<text style="color:#D8D8D8;font-size: 20rpx; margin-left: 4rpx;">心动</text>
								</view>
							</view>
						</view>
						<view @click="navigateToFn({url: '/mineMixinPages/flow_user?id=1&title=关注',checkLogin: true	})">
							<view class="tn-flex tn-flex-row-center tn-flex-col-bottom" style="margin-right: 24rpx;">
								<view class="">
									<view style="font-size: 24rpx;" class="tn-color-white tn-text-bold">{{body.fansi}}</view>
								</view>
								<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">

									<text style="color:#D8D8D8;font-size: 20rpx; margin-left: 4rpx;">关注</text>
								</view>
							</view>
						</view>
						<view
							@click="navigateToFn({ url: '/mineMixinPages/lookuser', checkLogin: true })">
							<view class="tn-flex tn-flex-row-center tn-flex-col-bottom" style="margin-right: 24rpx;">
								<view class="">
									<view style="font-size: 24rpx;" class="tn-color-white tn-text-bold">{{body.looknum}}</view>
								</view>
								<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
									<text style="color:#D8D8D8;font-size: 20rpx; margin-left: 4rpx;">来访</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 帖子列表 -->
				<view class="tn-margin-lg">
				<view class="button-number tn-flex tn-flex-col-center tn-flex-row-between" style="background: linear-gradient(270deg, #A7F6F9 0%, #6A6DFF 100%);" @click="navigateToFn({ url: '/mineMixinPages/vip', checkLogin: true })">
					<view class="tn-flex tn-flex-col-center" style="padding-left: 16rpx;">
						<image v-if="body.vip_lv" :src="lvImg[body.vip_lv-1]" alt="" style="width: 88rpx; height: 88rpx; margin-right:16rpx;"></image>
						<view>
							<view class='title' style="color: #fff;">
							<img src="../../../static/other/supervip.png" style="width: 160rpx; height: 40rpx" alt="">
							<!-- <text class="tn-icon-vip-text tn-text-center" style="position: absolute;margin: -22rpx 0 0 0;font-size: 92rpx;"></text> -->
							</view>
							<view style="font-size: 20rpx;color:#fff">首月0元享受重磅特权!</view>
						</view>
					</view>
					<text class="tn-icon-right tn-color-white tn-text-bold" style="font-size: 36rpx;margin-right: 20rpx;"></text>
					<!-- <view class="tn-margin-right">
					<tn-button @click="navigateToFn({ url: '/mineMixinPages/vip', checkLogin: true })" shape="round" backgroundColor="#F1C68E" fontColor="#634738" padding="10rpx 0" width="190rpx" shadow >
						<text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text>
						<text class="tn-text-bold"  v-if="body.vip==0">立即开通</text>
						<text class="tn-text-bold" v-if="body.vip==1">VIP中心</text>
					</tn-button>
					</view> -->
					
				</view>
				</view>  
				<!-- 更多信息-->
				<!-- <view
					class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left-sm tn-margin-right-sm ">


					<view @click="chongzhi()"
						class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between job-shadow tn-bg-white">
						<view
							class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">

							<view class="tn-info__item__left__content">
								<view class="tn-info__item__left__content--title tn-text-bold">我的{{configInfo.site_moneyname}}</view>
								<view class="tn-info__item__left__content--data tn-padding-top-xs">{{body.money}}</view>
							</view>
						</view>
						<view class="tn-info__item__right">
							<view class="tn-info__item__right--icon">
								<view class="tn-icon-right"></view>
							</view>
						</view>
					</view>

					<view @click="navigateToFn({ url: '/mineMixinPages/my_home', checkLogin: true })"
						class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between job-shadow tn-bg-white">
						<view
							class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">

							<view class="tn-info__item__left__content">
								<view class="tn-info__item__left__content--title tn-text-bold">我的主页</view>
								<view class="tn-info__item__left__content--data tn-padding-top-xs">{{body.goods_num}}
								</view>
							</view>
						</view>
						<view class="tn-info__item__right">
							<view class="tn-info__item__right--icon">
								<view class="tn-icon-right"></view>
							</view>
						</view>
					</view>



				</view> -->
				

				<view class="about-shadow">
					<view class="tn-flex tn-flex-row-between tn-color-white">
						<view class="about-card"
						style="background: linear-gradient(180deg, #FA5151 0%, #FFC300 100%);"
							@click="chongzhi()">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class=" tn-flex tn-flex-row-center tn-flex-col-center">
									<img src="../../../static/other/account.png" alt="" style="width: 72rpx;height: 72rpx;">
								</view>
								<view class="tn-text-center tn-margin-top-sm">
									<text class="tn-text-ellipsis">账户余额</text>
								</view>
							</view>
						</view>
						<view class="about-card"
						style="background: linear-gradient(90deg, #7F50FE 0%, #FFAEF8 67%, #D5B7F8 100%);"
							@click="navigateToFn({ url: '/mineMixinPages/daoju', checkLogin: true })">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class=" tn-flex tn-flex-row-center tn-flex-col-center">
									<img src="../../../static/other/activity.png" alt="" style="width: 72rpx;height: 72rpx;">
								</view>
								<view class="tn-text-center tn-margin-top-sm">
									<text class="tn-text-ellipsis">个性装扮</text>
								</view>
							</view>
						</view>
						<view class="about-card"
						style="background: linear-gradient(270deg, #189EFF 0%, #06FFAA 100%);"
							@click="navigateToFn({ url: '/circleMixinPages/reserve_my', checkLogin: true })">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class=" tn-flex tn-flex-row-center tn-flex-col-center">
									<img src="../../../static/other/dress.png" alt="" style="width: 72rpx;height: 72rpx;">
								</view>
								<view class="tn-text-center tn-margin-top-sm">
									<text class="tn-text-ellipsis ">我的活动</text>
								</view>
							</view>
						</view>
						<view class="about-card"
						style="background: linear-gradient(180deg, rgba(65, 133, 255, 0.8) 0%, rgba(85, 223, 252, 0.8) 100%);"
							@click="navigateToFn({ url: '/mineMixinPages/qiandao', checkLogin: true })">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class=" tn-flex tn-flex-row-center tn-flex-col-center">
									<img src="../../../static/other/task.png" alt="" style="width: 72rpx;height: 72rpx;">
								</view>
								<view class="tn-text-center tn-margin-top-sm">
									<text class="tn-text-ellipsis">任务中心</text>
								</view>
							</view>
						</view>
					</view>



				</view>

			
			<view class="tn-padding-bottom-sm" :style="{margin:`40rpx 40rpx ${body.is_renzheng ? '20rpx' : '118rpx'} 40rpx`, borderRadius: '10rpx', overflow:'hidden'}">
				<tn-list-cell style="background-color: rgba(0,0,0,0.3);" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/mineMixinPages/hei_user?id=0&title=黑名单', checkLogin: true })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class=" tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-my-reduce"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">黑名单</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell style="background-color: rgba(0,0,0,0.3);" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/homeMixinPages/about?id=32', checkLogin: false })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-help"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">帮助中心</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell style="background-color: rgba(0,0,0,0.3);" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/mineMixinPages/chat/talkkefu', checkLogin: false })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-service-simple"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">在线客服</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>
        <tn-list-cell style="background-color: rgba(0,0,0,0.3);" :hover="true" :unlined="true" :fontSize="30"
				@click="navigateToFn({ url: '/mineMixinPages/seting', checkLogin: true })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-down-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">系统设置</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell style="background-color: rgba(0,0,0,0.3);" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/homeMixinPages/about?id=25', checkLogin: false })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-tips"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">关于我们</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<!-- <tn-list-cell style="background-color: rgba(0,0,0,0.3);" v-if="body.jiaose>0" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/mineMixinPages/share', checkLogin: true })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-share"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">邀请奖励</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell> -->
				<!-- <tn-list-cell style="background-color: rgba(0,0,0,0.3);" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/homeMixinPages/down', checkLogin: true })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-down-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">APP下载</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell> -->
				<!-- <tn-list-cell style="background-color: rgba(0,0,0,0.3);border-radius: 0 0 10rpx 10rpx" :hover="true" :unlined="true" :fontSize="30"
					@click="navigateToFn({ url: '/mineMixinPages/chat/h5vod', checkLogin: false })">
					<view class="tn-flex tn-flex-col-center tn-color-white">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center  ">
							<view class="tn-icon-down-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">H5直播</view>
						<view class="tn-margin-left-sm tn-icon-right"></view>
					</view>
				</tn-list-cell>				 -->
			</view>
			</mescroll-body>

		</view>

		<view class='tn-tabbar-height'></view>


		<!-- 登录框组件 -->
		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>

		<tn-popup v-model="zhuangtai" width="80%" height="40%" mode="bottom" :borderRadius="30" :closeBtn="false"
			:maskCloseable="true">

			<view class="tn-padding tn-margin tn-padding-left-sm">
				<view class=" tn-text-bold ">Hi~{{body.nickname}}</view>
				<text class="tn-color-gray ">你目前的情感状态是:</text>
			</view>


			<view @click="zhuangtai=false;xuanzegdan=true"
				class=" tn-flex tn-flex-row-between tn-flex-col-center tn-margin tn-padding-sm"
				style="background-color: #F4F4F4;">
				<view
					class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom">
					<view class="">
						<image :src="calcImageSrc('/dage.png')" style="width: 80rpx;height: 80rpx;" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="justify-content-item tn-padding-bottom">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<view class="tn-padding-right tn-color-black">
							<view class="tn-padding-right tn-padding-left-sm">
								<text class=" tn-text-bold tn-icon-open">我是单身</text>
							</view>
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
								<text class="tn-color-gray">为你推荐要脱单、想恋爱、计划结婚的用户</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class=" tn-flex tn-flex-row-between tn-flex-col-center tn-margin tn-padding-sm"
				style="background-color: #F4F4F4;">
				<view
					class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom">
					<view class="">
						<image :src="calcImageSrc('/yituo.png')" style="width: 80rpx;height: 80rpx;" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="justify-content-item tn-padding-bottom" @click="tuodanpass">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<view class="tn-padding-right tn-color-black">
							<view class="tn-padding-right tn-padding-left-sm">
								<text class=" tn-text-bold tn-icon-open">我已脱单</text>
							</view>
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
								<text class="tn-color-gray">专属脱单标识，不在再推荐，纯净模式</text>
							</view>
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
								<text class="tn-color-gray">恢复单身收取{{configInfo.zhuangtia_dan}}{{configInfo.site_moneyname}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</tn-popup>

		<tn-popup v-model="xuanzegdan" width="80%" height="80%" mode="bottom" :borderRadius="30" :closeBtn="false"
			:maskCloseable="true">

			<view class="tn-padding tn-margin tn-padding-left-sm tn-flex tn-flex-row-between tn-flex-col-center">
				<view class=" tn-text-bold ">单身的你，现在是什么状态</view>
			</view>

			<view class="tn-flex tn-flex-wrap">


			<view v-for="(item, index) in zhuangtailist" :key="index" @click="xuanzezidingyi(index)"
					class=" tn-margin-sm"
					style="background-color: #F4F4F4;flex-basis:44%;" :class="zidngyiindex=== index ? 'tn-main-gradient-teal--light' : 'tn-bg-gray--light'">
				<view class="tn-flex  tn-flex-col-center  " style="margin-top: 20rpx;">
						<view	class="justify-content-item   tn-padding-bottom">
							<view class="">
								<image :src="calcImageSrc(item.image)" style="width: 80rpx;height: 80rpx;"
									mode="aspectFill"></image>
							</view>
						</view>
					<view class="justify-content-item tn-padding-bottom">
							<view class=" tn-padding-left-sm">
								<text class=" tn-text-bold">{{item.name}}</text>
							</view>					
					</view>
				</view>
					
			</view>	
			</view>
			
				<view class="tn-flex tn-flex-row-center tn-radius " @click="zidngyi()" v-if="!zidingyishow" style="background-color: #F4F4F4;">
		
			<view class="justify-content-item tn-padding" >
				<view class="tn-flex tn-flex-col-center tn-flex-row-left">
					<view class="tn-padding-right tn-color-black">
						<view class="tn-padding-right tn-padding-left-sm">						
							<text class=" tn-text-bold tn-icon-add " style="color: #aa55ff;font-size: 16px;"></text>
							<text class=" tn-text-bold tn-margin-left-sm">点我自定义</text>
						</view>					
					</view>
				</view>
			</view>				
			
			</view>
			<view v-else class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<input placeholder="输入自行义状态(6字内)" name="input" maxlength="6" v-model="zidingyititle" placeholder-style="color:#AAAAAA"></input>
			</view>
			
			<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top">
			
				<tn-button @click="zhuangtaipass" shape="round" backgroundColor="tn-cool-bg-color-6"
					fontColor="#ffffff" padding="40rpx 30rpx" width="260rpx" shadow fontBold>
					<text class=" tn-margin-right-sm" style="font-size: 56rpx;"></text>就 这 样
				</tn-button>
			
			</view>
			
		</tn-popup>
		<view class="renzheng-box tn-flex tn-flex-col-center tn-flex-row-between" v-if="!body.is_renzheng && isClose">
			<view class="tn-flex tn-flex-col-center tn-flex-row-between">
				<img src="../../../static/other/Certification-2.png" alt="" style="width: 48rpx; height: 50rpx">
				<view class="tn-flex tn-flex-direction-column" style="margin-left: 12rpx;">
					<text style="font-size: 24rpx;">还未完成认证</text>
					<text style="font-size: 20rpx;">认证后可解锁更多交友权益</text>
				</view>
			</view>
			<view>
				<tn-button shape="round" :plain="true" height="50rpx" min-width="116rpx" :fontSize="20" padding="0 23rpx" style="border-color: #fff;" fontColor="#fff"  @click="navigateToFn({ url: '/mineMixinPages/renzheng', checkLogin: true })">
					去认证
				</tn-button>
				<text class="tn-icon-close" @click="()=>{isClose = !isClose}" style="font-size: 28rpx;margin-left: 20rpx;"></text>
			</view>
		</view>
	</view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  name: "TemplateGroup",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
  },
  data() {
    return {
      upOption: {
        use: false,
      },
      zidngyiindex: 0,
      zidingyishow: false,
      xuanzegdan: false,
      zhuangtai: false,
      loginis: "",
      show_fabu: false,
      loading: true,
      loginBoxFlag: false, // 登录框显示隐藏状态
      isClose: true,
      id: 0,
      baifenbi: 0,
      chajifen: 0,
      body: {
        nickname: "",
        lv: 0,
        dec: 0,
        city: 0,
        bg_img: "",
        lv_score: 0,
        id: 0,
        "user_leve_once-body": 0,
      },
      zhuangtailist: [
        {
          name: "积极营业",
          image: "zt1.png",
        },
        {
          name: "沉迷工作间歇营业",
          image: "zt2.png",
        },
        {
          name: "接触中勿申",
          image: "zt3.png",
        },
        {
          name: "佛系随缘",
          image: "zt4.png",
        },
        {
          name: "累了已自闭",
          image: "zt5.png",
        },
        {
          name: "专心吃瓜",
          image: "zt6.png",
        },
        {
          name: "只谈恋爱",
          image: "zt7.png",
        },
        {
          name: "只交朋友不谈恋爱",
          image: "zt8.png",
        },
      ],
      zidingyititle: "",
      content: [],
      historyData: [
        {
          title: "我的钱包",
          icon: "pay",
          color: "orange",
          login: true,
          url: "/mineMixinPages/gift/chongzhi",
        },
        {
          title: "VIP会员",
          icon: "vip",
          color: "purple",
          url: "orange",
          login: false,
          url: "/mineMixinPages/vip",
        },
        {
          title: "任务中心",
          icon: "safe",
          color: "blue",
          url: "orange",
          login: true,
          url: "/mineMixinPages/qiandao",
        },
        {
          title: "道具商城",
          icon: "shop",
          color: "purplered",
          url: "orange",
          login: false,
          url: "/mineMixinPages/daoju",
        },
      ],
      lvImg: [
        "../../../static/other/LV1.png",
        "../../../static/other/LV2.png",
        "../../../static/other/LV3.png",
        "../../../static/other/LV4.png",
        "../../../static/other/LV5.png",
        "../../../static/other/LV6.png",
      ],
    };
  },

  onTabItemTap(e) {
    if (e.index == 3) {
      this.infobody();
    }
  },
  mounted() {
    let that = this;
    that.loginis = uni.getStorageSync("token");
    uni.$off("setLoginBoxFlag_indexmine");
    uni.$on("setLoginBoxFlag_indexmine", (loginBoxFlag) => {
      that.loginis = uni.getStorageSync("token");
      that.loginBoxFlag = loginBoxFlag;
    });

    uni.$on("loginok", async (res) => {
      console.log("登录成功");
      that.loginis = uni.getStorageSync("token");
      this.infobody();
    });

    that.infobody();

    this.msgcoutget();

    // 注册接受消息监听
    uni.$on("listMessage", (message) => {
      if (
        message.type == "hongbaonew" ||
        message.type == "text" ||
        message.type == "liwuuser" ||
        message.type == "mp3" ||
        message.type == "image"
      ) {
        setTimeout(() => {
          that.msgcoutget();
        }, 1000);
      }
    });
  },
  methods: {
    async msgcoutget() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/getmsgcount",
        data: {},
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.msgcount = result.data.msg;
          if (this.msgcount <= 0) {
            uni.removeTabBarBadge({ index: 2 }); //移除条数
          } else {
            uni.setTabBarBadge({
              index: 2,
              text: `${this.msgcount}`,
            });
          }
        }
      }
    },
    xuanzezidingyi(index) {
      this.zidngyiindex = index;
      this.zidingyishow = false;
      this.zidingyititle = "";
    },
    zidngyi() {
      this.zidngyiindex = -1;
      this.zidingyishow = true;
      this.zidingyititle = "";
    },
    downCallback(mescroll) {
      this.infobody();
      mescroll.endErr();
    },

    jinru(item) {
      this.navigateToFn({
        url: item.url,
        checkLogin: item.login,
      });
    },
    refreshFn() {
      this.infobody();
    },

    out() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认退出账号吗?",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            that.logOutFn();
            that.body.lv = 0;
            uni.reLaunch({
              url: "/pages/index",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    infobody() {
      let that = this;
      if (!uni.getStorageSync("token")) {
        that.info();
        that.loginBoxFlag = true;
        return false;
      } else {
        that.info();
      }
    },

    chongzhi(id) {
      this.navigateToFn({
        url: "/mineMixinPages/gift/chongzhi",
        checkLogin: true,
      });
      // if (this.configInfo.pay_type==0){
      // this.navigateToFn({ url: '/mineMixinPages/gift/chongzhi', checkLogin: true })
      // 	}
      // 	if (this.configInfo.pay_type==1){
      // 	this.navigateToFn({ url: '/mineMixinPages/gift/chongzhi_ren', checkLogin: true })
      // 	}
    },

    async guanzhu(id) {
      if (!uni.getStorageSync("token")) {
        this.loginBoxFlag = true;
        return false;
      }
      let result = await this.flowUser(id);
      this.body.is_follow = result.is_follow;
      this.msg(result.msg);
    },

    async tuodanpass() {
      let that = this;
      this.zidingyishow = false;
      this.zhuangtai = false;
      this.xuanzegdan = false;
      uni.showModal({
        title: "提示",
        content:
          "你确定脱单了吗？如要恢复单身需要扣除" +
          this.configInfo.zhuangtia_dan +
          "" +
          this.configInfo.site_moneyname +
          "?",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            that.tuodanpassget();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    async tuodanpassget() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/user/set_allpass",
        data: {
          zhuangtai: 1,
          zhuangtai_title: "已脱单",
          zhuangtai_image: "yituo.png",
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.infobody();
          this.zidingyishow = false;
          this.zhuangtai = false;
          this.xuanzegdan = false;
          this.msg("设置成功");
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async zhuangtaipass() {
      let that = this;
      if (this.body.zhuangtai == 1) {
        this.zidingyishow = false;
        this.zhuangtai = false;
        this.xuanzegdan = false;
        uni.showModal({
          title: "提示",
          content:
            "你当前状态为已脱单，如要恢复单身需要扣除" +
            this.configInfo.zhuangtia_dan +
            "" +
            this.configInfo.site_moneyname +
            "?",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              that.ztpass();
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        this.ztpass();
      }
    },

    async ztpass() {
      let that = this;
      let zhuangtai_title;
      let zhuangtai_image;
      if (this.zidingyititle) {
        zhuangtai_title = this.zidingyititle;
        zhuangtai_image = "zt1.png";
      } else {
        zhuangtai_title = this.zhuangtailist[this.zidngyiindex].name;
        zhuangtai_image = this.zhuangtailist[this.zidngyiindex].image;
      }

      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/user/set_allpass",
        data: {
          zhuangtai: 0,
          zhuangtai_title: zhuangtai_title,
          zhuangtai_image: zhuangtai_image,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.infobody();
          this.zidingyishow = false;
          this.zhuangtai = false;
          this.xuanzegdan = false;
          this.msg("设置成功");
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async info() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/GetUser",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.body = result.data.data.userinfo;
          if (that.body.id) {
            if (that.body.lv_score < -1) {
              that.body.lv_score = that.body.lv_score * -1;
            }
            that.baifenbi =
              (that.body.lv_score / that.body.user_leve_once) * 100;
            that.chajifen = that.body.user_leve_once - that.body.lv_score;
          }
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    /// 列表调用
    myhome() {
      this.navigateToFn({
        url:
          "/circleMixinPages/blogger_other?id=" + uni.getStorageSync("user_id"),
        checkLogin: true,
      });
    },
    // 关闭压屏窗
    closeLandscape() {
      this.show_fabu = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.meng {
}

.icon11 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
      }
    }
  }
}

.template-mine {
  width: 100vw;
  height: 100vh;
}

.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
}

/* 自定义导航栏内容 start */
.custom-nav {
  height: 100%;

  &__back {
    margin: auto 5rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
    flex-basis: 5%;
    width: 100rpx;
    position: absolute;
  }
}

/* 自定义导航栏内容 end */

/* 顶部背景图 start */
.top-backgroup {
  height: 380rpx;
  z-index: -1;

  .backgroud-image {
    width: 100%;
    height: 250rpx;
    // z-index: -1;
  }
}

/* 顶部背景图 end */

/* 标题 start */
.nav_title {
  -webkit-background-clip: text;
  color: #0e122a;

  &--wrap {
    position: relative;
    display: flex;
    height: 120rpx;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
    background-size: cover;
  }
}

/* 标题 end */

/* 用户头像 start */
.logo-image {
  width: 190rpx;
  height: 150rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;

  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

/* 页面 start*/
.about-shadow {
  padding: 0 40rpx;
  // border-radius: 15rpx;
  // box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  .about-card {
    width: 147.08rpx;
    height: 178rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.about {
  &__wrap {
    position: relative;
    z-index: 1;
    margin: 20rpx 30rpx;
    margin-top: -230rpx;
  }
}

.about-shadow {
  // border-radius: 15rpx;
  // box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 页面 end*/

/* 图标容器12 start */
.tn-three {
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg)
    rotateZ(-30deg);
  text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0,
    -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}

.icon20 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
      }
    }
  }
}

/* 图标容器12 start */
.icon12 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 15rpx;
      height: 15rpx;
      font-size: 50rpx;
      border-radius: 50%;
      margin-bottom: 38rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

/* 图标容器1 start */
.icon1 {
  &__item {
    // width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 40rpx;
      height: 40rpx;
      font-size: 28rpx;
      border-radius: 50%;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(@/static/icon_bg.png);
      }
    }
  }
}

/* 图标容器1 end */

/* 大嘴鸟*/
.dong {
  z-index: 9999;
  position: fixed;
  top: -40px;
  right: -80px;
  transform: scale(0.24);
  -webkit-transform: scale(0.24);
  -moz-transform: scale(0.24);
}

.monster {
  transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  /* IE 9 */
  -moz-transform: rotate(-50deg);
  /* Firefox */
  -webkit-transform: rotate(-50deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(-50deg);
  /* Opera */
  display: flex;
  justify-content: center;
  position: relative;
  width: 170px;
  height: 400px;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  background-color: #3c47d7;
  box-shadow: 20px 20px 60px #4650e5;
}

.monster__face {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 14%;
  width: 75%;
  height: 160px;
}

.monster__noses {
  top: 50%;
  display: flex;
  justify-content: space-between;
  width: 28%;
  height: auto;
  margin-bottom: 10px;
}

.monster__nose {
  width: 8px;
  height: 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}

.monster__mouth {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 0%;
  overflow: hidden;
  border: 25px solid #ffc333;
  border-radius: 100px;
  background-color: #810332;
  animation: mouth 1.75s infinite;
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.monster__mouth::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 80px;
  border-radius: 100px;
  background-color: #400018;
}

.monster__mouth::after {
  content: "";
  position: absolute;
  bottom: -80px;
  width: 160px;
  height: 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #dc1b50;
  animation: tongue 1.75s infinite;
}

.monster__top {
  position: absolute;
  top: -30px;
  width: 170px;
  height: 30px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #ffffff;
  z-index: 100;
  animation: t 1.75s infinite;
}

.monster__bottom {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #ffffff;
  z-index: 100;
  animation: b 1.75s infinite;
}

/* 积分数字 */
.button-number {
  width: 100%;
  height: 150rpx;
  border-radius: 15rpx 15rpx 0 0;
  position: relative;
  z-index: 1;

  &::after {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
    background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
  }
}
.avatar-eye {
  position: absolute;
  top: -10%;
  width: 65px;
  height: 65px;
  background: linear-gradient(105deg, white, #cb87f4);
  border-radius: 100%;
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
  margin: 3px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.avatar-eye--green {
  background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}

.avatar-eye--violet {
  background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}

.eye--left {
  left: 10%;
}

.eye--right {
  left: 85%;
}

.eye--center {
  left: 45%;
  top: 10%;
}

.avatar-eye-pupil {
  position: absolute;
  width: 55%;
  height: 55%;
  left: 50%;
  top: 25%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  z-index: 100;
  border-radius: 100%;
}

.pupil--green {
  background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}

.pupil--pink {
  background: linear-gradient(135deg, #f1a183, #8535cd);
}

.avatar-eye-pupil-blackThing {
  position: absolute;
  width: 55%;
  height: 55%;
  left: 50%;
  top: 25%;
  background: #2c2f32;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  border-radius: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.avatar-eye-pupil-lightReflection {
  position: absolute;
  width: 7px;
  height: 7px;
  left: 25%;
  top: 10%;
  background: #ebebeb;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  border-radius: 100%;
  box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}

/* 信息展示 start */
.tn-info {
  &__container {
    margin-top: 0rpx;
  }

  &__item {
    width: 48%;
    margin: 15rpx 0rpx;
    padding: 38rpx 28rpx;
    border-radius: 10rpx;

    &__left {
      &--icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        font-size: 40rpx;
        margin-right: 20rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg3.png);
        }
      }

      &__content {
        font-size: 30rpx;

        &--data {
          color: #848484;
          margin-top: 5rpx;
        }
      }
    }

    &__right {
      &--icon {
        font-size: 30rpx;
        opacity: 0.5;
      }
    }
  }
}

.job-shadow {
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
  border-radius: 20rpx;
}

.tn-cool-bg-color-userhead {
  // background-image: repeating-linear-gradient(182deg, #dde0ff, #ffffff);
}

.avatar-box {
  position: relative;
  img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}

.renzheng-box {
  width: 100%;
  height: 98rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 20rpx 40rpx;
  position: fixed;
  color: #fff;
  bottom: 100rpx;
}

::v-deep .tn-avatar__img--circle {
  width: 156rpx;
  height: 156rpx;
  border: 4rpx solid #24d4d1;
}
</style>